<template>
  <div class="count">
    <h2>当前求和为：{{ countStore.sum }}</h2>
    <h3>{{ countStore.school }}</h3>
    <h3>{{ countStore.address }}</h3>
    <select v-model="n">
      <!--要么在 v-model 后面.number，要么 :value-->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="addOne">加</button>
    <button @click="reduceOne">减</button>
  </div>
</template>

<script lang="ts" setup name="Count">
import { ref } from "vue";
import { useCountStore } from "../store/count";

const countStore = useCountStore();
console.log(countStore.sum);
/*包裹在一个对象里，是对象的一个属性，且类型为 ref，这种不用.value，直接定义的数据要.value */

//let sum = ref(0);
let n = ref(0);

function addOne() {
  //sum.value += n.value;

  //第一种方式：所有数据要一个一个写，修改三次
  /*
  countStore.sum += n.value;
  countStore.school = "Fuzhou University";
  countStore.address = "Fuzhou";
  */

  //第二种方式：统一变更，修改一次
  countStore.$patch({
    sum: 888,
    school: "Fuzhou University",
    address: "Fuzhou",
  });

  //第三种修改方式：
  countStore.increment(n.value);
}

function reduceOne() {
  //sum.value -= n.value;
  countStore.sum -= n.value;
}
</script>

<style scoped>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  margin: 10px 0;
}
select,
button {
  margin: 0 5px;
  height: 25px;
}
</style>
